{% extends 'base.html' %}


{% block title %}{{ game_info["name"]["zh-Hans"] }}{% endblock %}
{% block main %}
    <div class="container mt-3">
        <div class="row">
            <div class="col-sm-8">
                <div class="card mb-3">
                    <div id="screen_container">
                        <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
                    </div>
                    <div class="card-body">
                        <div>
                            <h5 class="card-title game-title">{{ game_info["name"]["zh-Hans"] }}</h5>
                            <div id='controls'>
                                <span><input class="btn btn-light" type="button" value="网页全屏"
                                             onclick="htmlFullscreen();"></span>
                                <span><input class="btn btn-light" type="button" value="全屏游戏"
                                             onclick="emulator.requestFullScreen();"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                {% if game_info.keymaps %}
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">操作</h5>
                            {% for k,v in game_info.keymaps.items() %}
                                <kbd>{{ k }}</kbd> {{ v }}<br>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
                {% if game_info.cheats %}
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">作弊</h5>
                            {% for k,v in game_info.cheats.items() %}
                                <code>{{ k }}</code> {{ v }}<br>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
                {% if game_info.links %}
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">链接</h5>
                            {% for k,v in game_info.links.items() %}
                                <a href="{{ v }}" class="card-link" target="_blank">{{ k }}</a><br>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="exit_fullscreen" id="exit_button">
        <input class="btn btn-light" type="button" value="退出" onclick="htmlFullscreen();">
    </div>
    <script type="text/javascript" src="{{ url_for('static', filename='emularity/es6-promise.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='emularity/browserfs.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='emularity/loader.js') }}"></script>
    <script type="text/javascript">
        var emulator = new Emulator(document.querySelector("#canvas"),
            null,
            new DosBoxLoader(DosBoxLoader.emulatorJS("{{ url_for('static', filename='emularity/dosbox/dosbox-sync.js') }}"),
                DosBoxLoader.locateAdditionalEmulatorJS(locateAdditionalFiles),
                DosBoxLoader.nativeResolution(640, 480),
                DosBoxLoader.fileSystemKey("{{ game_info["identifier"] }}"),
                DosBoxLoader.mountZip("c",
                    DosBoxLoader.fetchFile("Game File",
                        "{{ url_for('static', filename="games/bin/{}.zip".format(game_info["identifier"])) }}"),
                    {% if game_info["cdrom"] %}"cdrom"{% elif game_info["floppy"] %}"floppy"{% else %}"hdd"{% endif %}
                ),
                DosBoxLoader.startExe("{{ game_info["executable"] }}")
            )
        );
        emulator.start({waitAfterDownloading: true});

        function locateAdditionalFiles(filename) {
            if (filename === "dosbox.html.mem") {
                return "{{ url_for('static', filename='emularity/dosbox/dosbox-sync.mem') }}";
            }
            else {
                return "{{ url_for('static', filename='emularity/dosbox/dosbox-sync.mem') }}" + filename;
            }
        }
    </script>
    <script src="{{ url_for('static', filename='js/game.js') }}"></script>
{% endblock %}

